<template>
	<div class="circleProgressBox">
		<div class="circleProgress flex-row">
			<div class="rela circleProgress_l">
				<el-progress type="circle" :percentage="percentage" :stroke-width="strokeWidth" :width="width" :show-text="showText" class="overdue rela"></el-progress>
				<div class="shadow abso"></div>
			</div>
			<div class="text font-18 margin-l-30 circleProgress_r">
				<div class="address text-gray flex-row">
					{{address}} <img :src="medal" class="margin-l-20">
				</div>
				<div class="number font-12 text-gray">
					<span class="font-26 line-block margin-r-20">{{number}}</span>件
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			address: {
				type: String,
				default: ''
			},
			medal: {
				type: String,
				default: ''
			},
			percentage: {
				type: Number,
				default: 0
			},
			number: {
				type: Number,
				default: 0
			},
			showText: {
				type: Boolean,
				default: false
			},
			strokeWidth: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			}
		},
		mounted() {
			console.log('width', this.width)
		}
	}
</script>

<style lang="less" scoped>
	.circleProgress{
		.address{
			margin: 6px 0;
		}
		.number{
			span{
				color: #0953ec;
			}
		}
	}
</style>
<style lang="less">
	.circleProgress{
		.el-progress__text{
			color: #4280ff !important;
		}
	}
</style>
